Getting Started with the SDK

This topic describes getting started with developing mobile pages using Process Platform HTML5 SDK.

You can get started with developing mobile pages using Process Platform HTML5 SDK.

Note:
Even though the examples and descriptions provided in this topic are for creating the mobile pages, you can also use them to create other Web pages using the SDK.

Prerequisites

Process Platform must be installed.
Northwind related Web services must be created for some demo pages.

Demo Apps

You can refer to the sample HTML files in the demo folder shipped with the HTML5 SDK. For more information on viewing a demo page on the Apps tab, refer to Making an App Available to a Mobile User.

Note:
The files in the demo folder use the standard methods created using the Northwind Database with the Namespace http://schemas.cordys.com/NW . For more information, refer to Generating Standard Web service Operations on a Database .

Creating an App

You can add mobile pages to any of your projects by adding the HTML documents to the web folder. For more information on creating a document, refer to Creating a Document.
You can paste your mobile page code (HTML) in the new HTML document.

Note:
Only plain text editing is available.

To start with a template of the page, you can use any third party HTML designer, such as Codiqa for jQuery Mobile. You can use any of the examples in the html5/demo folder or use the following code snippet, in which jsRender is used as the rendering library:

<html>
    <head>
        <title>Mobile</title>
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <link href="/cordys/thirdparty/jquery/jquery.mobile.min.css" rel="stylesheet"/>
        <script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"/>
        <script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"/>
        <script src="/cordys/thirdparty/jsrender/jsrender.js" type="text/javascript"/>
        <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"/>
    </head>
    <body>
        <div data-role="page" id="myPage">
            <div data-role="header" data-theme="b">
                <a data-icon="back" href="http://www.cordys.com">Cordys</a>
                <h1>Mobile</h1>
            </div>
            <div data-role="content" data-theme="b">
                <!-- Content comes here -->
            </div>
        </div>
    </body>
</html>

For more information on the HTML used in this example, refer to jQuery Mobile .

You can use a binding library of your choice for the data binding. This SDK supports jsRender and knockoutJS out of the box.

You can also use other libraries such as knockoutJS , which is bundled with the Process Platform HTML5 SDK, by replacing the include for jsrender with the following:

<script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"/>

The jsRender supports only unidirectional binding and knockoutJS is used in the SDK for its model implementation.

- For more examples on the usage of jsRender as a rendering library, refer to Retrieving the Data.
- The examples provided in Building Transactional Mobile Applications and Building Read-only Mobile Applications , use knockoutJS .

An app has been created.

For examples on using the HTML5 SDK, refer to Sample Pages .

Using the App

Publish the Web page you developed using CWS (Collaborative Work Space). You can view the Web pages using a browser on your PC or mobile by accessing the following URL:

http://<your domain>/cordys/html5/demo/employees.htm

Adding the Styles

You can include the default stylesheet provided by jQuery Mobile or create custom themes using ThemeRoller . It allows you to build a theme and download a custom CSS file, ready to be added into your project and inserted into your HTML page.

You can create a general theme for an organization and a specific theme for a project, but both of them must be included in the header of your pages before you specify the standard jQuery Mobile CSS:

<head>
 
  <title>jQuery Mobile page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/cordys/com/myOrg/css/themes/my-organization-theme.css" />
  <link rel="stylesheet" href="/cordys/com/myOrg/my project/css/themes/my-project-theme.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 
</head>